<template>
	<div>
		<commons-alert @alert-dismissed="alertDismissed" :variant="alert.variant" :dismissCountDown="alert.dismissCountDown">{{alert.message}}</commons-alert>
		<div class="choosed-tag" v-for="item in allItems">
			{{item.text}}
			<b-icon @click="cancelTag(item)" icon="x"></b-icon>
		</div>
		<div class="text-secondary text-center">用空格键或回车键确认</div>
		<b-input autocomplete="off" v-model="value" @keyup.up="upSelectFoucs" @keyup.down="downSelectFoucs" @keyup.enter="saveTag" @keyup.space="saveTag"></b-input>
		<b-list-group>
			<b-list-group-item @click="selectItem(op)" v-for="(op, idx) in totals" :key="op.value" :active="op.active">{{op.text}}</b-list-group-item>
		</b-list-group>
	</div>
</template>

<script>
	import axios from 'axios'
	import gl from '../../commons/global_variable.js'
	import _ from 'lodash'
	import CommonsAlert from '../../commons/Alert.vue'

	export default {
		name: "simple-tags",
		components: {
			CommonsAlert
		},
		props:{
			initTags: {
				type: Array,
				default: function(){
					return []
				}
			}
		},
		data: function() {
			return {
				value: '',
				items: [],
				totals: [],
				selected: '',
				needSave: true,
				alert: {
					message: '',
					dismissCountDown: 0,
					variant: 'warning'
				}
			}
		},
		created: function() {
			this.debouncedGetTags = _.debounce(this.getTags, 500)
		},
		methods: {
			getTagIds: function(){
				return this.allItems.map(function(item){
					return item.value
				})
			},
			saveTag: function() {
				if(!this.needSave){
					var activedItem = this.totals.find(function(item){
						return item.active
					})
					this.reInit(activedItem)
					return
				}
				if(this.value === null || this.value.trim().length === 0){
					return
				}
				var that = this
				axios.post(gl.cms_args.server_url + 'tag/sou', {
					name: this.value,
					aliasName: this.value
				}).then(function(response){
					var res = response.data
					if(res.code === gl.cms_args.success){
						that.reInit({
							value: res.data.id,
							text: res.data.name
						})
					}else{
						that.onSaveError()
					}
				}).catch(function(error){
					that.onSaveError()
				})
			},
			reInit: function(item){
				this.items.push({
					value: item.value,
					text: item.text
				})
				this.value = ''
				this.totals = []
				this.needSave = true
			},
			cancelTag: function(tag) {
				this.items.splice(this.items.indexOf(tag), 1)
			},
			getTags: function() {
				// 没有数据或正在选择时，不查询
				if(!this.value || this.totals.length > 0){
					return
				}
				this.totals = []
				var that = this
				// 最多只查10个出来选择
				axios.post(gl.cms_args.server_url + 'tag/list', {
					name: this.value,
					page: 1,
					size: 10
				}).then(function(response) {
					var res = response.data
					if (res.code === gl.cms_args.success) {
						that.totals = res.data.records.map(function(item, idx) {
							return {
								value: item.id,
								text: item.name,
								active: idx === 0
							}
						})
						if(that.totals.length > 0){
							that.selected = that.totals[0].value
						}
					} else {
						that.onQueryError()
					}
				}).catch(function(error) {
					that.onQueryError()
				})
			},
			onQueryError: function() {
				this.alert.message = '查询标签失败'
				this.alert.dismissCountDown = 3
			},
			onSaveError: function() {
				this.alert.message = '保存新标签失败'
				this.alert.dismissCountDown = 3
			},
			alertDismissed: function(){
				this.alert.dismissCountDown = 0
			},
			downSelectFoucs: function(){
				var activedIdx = this.totals.findIndex(function(item){
					return item.active
				})
				this.totals[activedIdx].active = false
				activedIdx ++
				if(activedIdx >= this.totals.length){
					activedIdx = 0
				}
				this.totals[activedIdx].active = true
				this.value = this.totals[activedIdx].text
				this.needSave = false
			},
			upSelectFoucs: function(){
				var activedIdx = this.totals.findIndex(function(item){
					return item.active
				})
				this.totals[activedIdx].active = false
				activedIdx --
				if(activedIdx < 0){
					activedIdx = this.totals.length - 1
				}
				this.totals[activedIdx].active = true
				this.value = this.totals[activedIdx].text
				this.needSave = false
			},
			selectItem: function(item){
				this.totals.forEach(function(it){
					it.active = false
				})
				item.active = true
				this.value = item.text
				this.needSave = false
				this.saveTag()
			}
		},
		watch: {
			value: function(val) {
				this.debouncedGetTags()
			}
		},
		computed:{
			allItems: function(){
				return this.initTags.concat(this.items)
			}
		}
	}
</script>

<style>
	.choosed-tag {
		display: inline-block;
		border-radius: 1.875rem;
		height: 2.1875rem;
		line-height: 2.1875rem;
		margin-right: 0.625rem;
		margin-bottom: 0.3125rem;
		padding-left: 0.3125rem;
		border: 0.0625rem solid rgba(34, 47, 62, .7);
	}
	.select-items {
		max-height: 15.625rem;
	}
</style>
